<!doctype html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<title>动态更新数据</title>
<!--Jquery-->
<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
<!--页面样式文件-->
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
<!--Mobiscroll脚本文件-->
<link rel="stylesheet" type="text/css" href="../../dist/css/mobiscroll.custom-3.0.0.min.css"/>
<script src="../../dist/js/mobiscroll.custom-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--地区数据脚本-->
</head>
<body>
<div class="container">
	<div class="mt-2" style="text-align: center;">
		<p class="text-muted">此Demo为动态更新Scroller的数据</p>
		<button type="button" class="btn btn-danger">Show Scroller</button>
	    <button type="button" class="btn btn-primary">Update Date</button>
	</div>
</div>	
<script>
	$(function(){
		//统一DOM
		var dynamic = $('.btn-danger');
		//默认数据
		var wheel_data = [{"key": 1,"display": "x"},{"key": 2,"display": "y"},{"key": 3,"display": "z"}];
		
		dynamic.mobiscroll().scroller({
	        theme: 'auto',
	        lang: 'zh',
	        display: 'bottom',
	        width: 150,
	        wheels: [
	            [{
	                circular: false, //是否无限滚动
	                data: wheel_data, //轮子数据
	                label: 'From' //轮子标签，显示取决于 showLabel
	            }]
	        ],
	        showLabel: true //是否显示标签
    	});
		
		
		//更新Scroller数据
		$(".btn-primary").click(function(){
			$.getJSON("data.json",function(e){
				var new_data = [];
				$.each(e, function(i,item) {
					new_data.push({"key": item.value,"display": item.name});
				});
				//更新
				dynamic.mobiscroll('changeWheel', {
				    0 : {
				        data: new_data
				    }
				}, 300);
				
				//以下代码为用户体验信息，可以忽略
				toastr.success('更新成功！')
				
				dynamic.mobiscroll('show');
				
			})
		})
		
		
	})
</script>
</body>
</html>
